<template>
	<div class="components-container">
		  <div class="message-side" :style="{height: height + 'px'}">
        <ul class="side-Wen">
          <li v-for="(x,index) in messMenu" v-text="x" :class="{active:active===index}" @click="toggle(index)"></li>
        </ul>
      </div>

      <div class="mess-container">
        <component :is="currentView" transition="fade" transition-mode="out-in" style="width: 98%; margin-top: 20px"></component>
      </div>
	</div>


</template>
<style rel="stylesheet/scss" lang="scss" scoped>

	.components-container{
      margin: 0;
      overflow: hidden;
      display: flex;
      .message-side{
          width: 150px;
          height: 100%;
          background: #42536b;
          flex: 0 0 150px;
        ul.side-Wen{
          overflow: hidden;
          list-style-type:none;
          margin: 0;
          padding: 0;
          li{
            color: white;
            list-style-type:none;
            height: 45px;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
          }
          li.active {
              color: #fff;
              background: #1a7570;
          }
          li:hover{
            background: #1a7570;
          }
        }
    }
  }
  .el-submenu .el-menu-item{
        width: 100% !important;
        min-width: 100% !important;
  }
  .el-submenu .el-menu-item:hover, .el-submenu__title:hover{
       width: 100% !important;
       min-width: 100% !important;
  }
  .el-menu{
       width: 150px !important
  }
  .mess-container{
    width: 100%;
    height: 500px;
    margin-left: 20px;
    // margin-top: -70px;
    flex:1
  }
</style>
<script>
import messages_0 from './allRead'
import messages_1 from './task'
import messages_2 from './interact'
	export default {
        name: 'messages',
        data() {
            return {
              height: window.innerHeight-110,
              active: 0,
              currentView: 'messages_0',
              messMenu:[
                '我的提醒',
                '我的任务',
                '我的互动'
              ]
            }
        },
        methods: {
            handleOpen(key, keyPath) {
              console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
              console.log(key, keyPath);
            },
            toggle(index) { //tab切换
                this.active = index
                this.currentView = 'messages_' + index;
            },

        },
        mounted() {

        },

        components: {
           messages_0,
           messages_1,
           messages_2
        },

        created() {

        },
        computed: {
          key() {
            return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
          }
        }
    }
</script>